<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="cc">
        <li class="a">法外狂徒-张三</li>
        <li class="b">李四</li>
        <li class="c">王八</li>
    </ul>
    <script>
        // 1、获取所有的子节点
        console.log(document.querySelector('ul').childNodes);
        // 2、获取属性节点
        console.log(document.querySelector('ul').attributes);
        // 3、获取第一个子节点
        console.log(document.querySelector('ul').firstChild);
        // 4、获取最后一个子节点
        console.log(document.querySelector('ul').lastChild);
        // 5、获取下一个兄弟节点
        console.log(document.querySelector('.a').nextSibling);
        // document.querySelector('.a').nextSibling 返回的还是一个节点对象 所以可以继续调用nextSibling
        console.log(document.querySelector('.a').nextSibling.nextSibling);
        // 6、上一个兄弟节点
        console.log(document.querySelector('.a').nextSibling.nextSibling.previousSibling.previousSibling);

        // let obj ={
        //     name:'abc',
        //     say:function(){
        //         console.log(' my name is '+ this.name);
        //         return this;
        //     },
        //     run:function(){
        //         console.log('run');
        //     }
        // } 
        // obj.say().run()
    </script>
</body>
</html>